<style include="diagnostics-shared">
  #chartName {
    color: var(--cros-text-color-secondary);
    display: inline-block;
    font-family: var(--diagnostics-roboto-font-family);
    font-size: 13px;
    font-weight: var(--diagnostics-regular-font-weight);
    height: 20px;
    line-height: 20px;
  }

  paper-progress {
    border-radius: 5px;
    display: inline-block;
    width: 95%;
    --paper-progress-active-color: var(--cros-slider-color-active);
    --paper-progress-container-color: var(--cros-slider-track-color-active);
    --paper-progress-height: 4px;
  }
</style>
<div id="barChartContainer">
  <div class="body">
    <paper-progress id="barChart"
        value="[[getAdjustedValue(value, max)]]" max="[[max]]">
    </paper-progress>
  </div>
  <label id="chartName">
    [[header]]
  </label>
</div>
